import React, { Component, Fragment } from "react";
import { withRouter } from 'react-router-dom';
// ANTD
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, UnlockOutlined  } from '@ant-design/icons';
// 验证
import { validate_password } from "../../utils/validate";
// 加密
import { enDES3_pass } from "../../utils/validate";
// connect
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
//action
import { setTokenAction, setRefreshTokenAction, setUsernameAction, accountLoginAction } from "@/stroe/action/App";
// css
import "./index.scss";

class LoginForm extends Component{
    constructor(){
        super();
        this.state = {
            username: "",
            password: "",
            loading: false
        };
    }
    // 登录
    onFinish = (values) => {
        const requestData = {
            username: this.state.username,
            password: enDES3_pass(this.state.password),
        }
        this.setState({
            loading: true
        })
        this.props.actions.handlerLogin(requestData).then(response => {
            console.log(response)
            this.props.history.push('/index/home/dashboard');
        }).catch(error => {
            console.log(error)
            this.setState({
				loading: false
			})
        })
    };
    /** input输入处理 */
    inputChangeUsername = (e) => {
        let value = e.target.value;
        this.setState({
            username: value
        })
    }
    inputChangePassword = (e) => {
        let value = e.target.value;
        this.setState({
            password: value
        })
    }
    toggleForm = () => {
        // 调父级的方法
        // this.props.switchForm("register");
        message.warn('注册功能已关闭，有问题联系运维。')
    }

    render(){
        const { username, loading } = this.state;
        return (
            <Fragment>
                <div className="login-title">Ops System</div>
                <div className="form-header">
                    <h4 className="column">登录</h4>
                    <span onClick={() => window.open('https://login.dingtalk.com/oauth2/auth?redirect_uri=http%3A//ops.raycloud.cn/api/v1/dingtalk/auth&response_type=code&client_id=client_id&scope=openid&state=dddd&prompt=consent')}>钉钉扫码登录</span>
                </div>
                <div className="form-content">
                    <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish}
                    >
                        <Form.Item name="username" rules={
                            [
                                { required: true, message: "邮箱不能为空" },
                                { type: "email", message: "邮箱格式不正确"}
                            ]
                        }>
                            <Input value={username} onChange={this.inputChangeUsername} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="email" />
                        </Form.Item>
                        <Form.Item name="password" rules={
                            [
                                { required: true, message: '密码不能为空' },
                                { pattern: validate_password, message: "请输入大于6位小于20位数字+字母" },
                            ]
                        }>
                            <Input type="password" onChange={this.inputChangePassword} prefix={<UnlockOutlined className="site-form-item-icon" />} placeholder="Password" />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" loading={loading} htmlType="submit" className="login-form-button" block> 登录 </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Fragment>
        )
    }
}


const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators({
            setToken: setTokenAction,
            setRefreshToken: setRefreshTokenAction,
            setUsername: setUsernameAction,
            handlerLogin: accountLoginAction
        }, dispatch)
    }
}

export default connect(
    null,
    mapDispatchToProps
)(withRouter(LoginForm));
